<template>
  <div>
     <tw-chart
        :dataset="schoolDataLine.dataset"
        :chartOption="schoolDataLine.chartOption"
        :chartDataMaps="schoolDataLine.chartDataMaps"
        height="260px"
      ></tw-chart>
  </div>
</template>
<script>
export default {
  name: 'tw-linebar',
  props: {
    source: {
      type: String,
      default: 'school'
    },
    degree: {
      type: String,
      default: '1'
    }
  },
  data () {
    return {
      schoolDataLine: {
        dataset: [],
        chartOption: {
          color: ['#005dfd', '#00f2f2', '#ffdc85'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            }
          },
          legend: {
            data: ['现有学校数量', '需要学校数量'],
            top: '2%',
            textStyle: {
              fontSize: 16
            },
            borderRadius: 5
          },
          grid: {
            top: '25%',
            left: '5%',
            right: '8%',
            bottom: '4%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: [],
              boundaryGap: true,
              axisLabel: {
                interval: 0,
                fontSize: 16
              }
            }],
          yAxis: [
            {
              type: 'value',
              splitNumber: 3,
              axisLabel: {
                fontSize: 16
              }
            },
            {
              type: 'value',
              splitNumber: 3,
              nameTextStyle: {
                color: '#94aad4',
                fontSize: 16
              },
              axisLabel: {
                fontSize: 16
              }
            }
          ],
          series: []
        },
        chartDataMaps: []
      }
    }
  },
  created () {
    this.initData()
  },
  watch: {
    degree () {
      this.initData()
    }
  },
  methods: {
    initData () {
      let vm = this
      vm.$axios.get(`${process.env.BASE_URL}json/graduategongshu.json`, {
        baseURL: ''
      }).then((resp) => {
        if (vm.source === 'school') {
          if (vm.degree === '1') {
            vm.schoolDataLine.dataset = resp.data.school.dataset
          } else if (vm.degree === '2') {
            vm.schoolDataLine.dataset = resp.data.school.dataset1
          } else {
            vm.schoolDataLine.dataset = resp.data.school.dataset2
          }
          vm.schoolDataLine.chartDataMaps = resp.data.school.chartDataMaps.map(item => {
            return {
              ...item,
              type: item.name === '超额学校数量' ? 'bar' : 'line',
              yAxisIndex: item.name === '超额学校数量' ? 1 : 0,
              barMaxWidth: 15,
              smooth: true,
              lineStyle: {
                type: item.dataKey === 'grade3' || item.dataKey === 'grade4'
                  ? 'dot'
                  : 'solid'
              },
              itemStyle: {
                barBorderRadius: [5, 5, 0, 0]
              }
            }
          })
        } else if (vm.source === 'house') {
          if (vm.degree === '1') {
            vm.schoolDataLine.dataset = resp.data.house.dataset
          } else if (vm.degree === '2') {
            vm.schoolDataLine.dataset = resp.data.house.dataset1
          } else {
            vm.schoolDataLine.dataset = resp.data.house.dataset2
          }
          vm.schoolDataLine.chartDataMaps = resp.data.house.chartDataMaps.map(item => {
            return {
              ...item,
              type: item.name === '生均面积' ? 'bar' : 'line',
              yAxisIndex: item.name === '生均面积' ? 1 : 0,
              barMaxWidth: 15,
              smooth: true,
              lineStyle: {
                type: item.dataKey === 'grade3' || item.dataKey === 'grade4'
                  ? 'dot'
                  : 'solid'
              },
              markLine: item.name === '生均面积' ? {
                symbol: 'none',
                data: [{
                  name: '生均面积',
                  yAxis: 0.015,
                  label: {
                    show: 'true',
                    position: 'middle',
                    formatter: '最低标准55M'
                  },
                  lineStyle: {
                    normal: {
                      width: 2,
                      color: '#FF5D1D'
                    }
                  }
                }]
              } : {},
              itemStyle: {
                barBorderRadius: [5, 5, 0, 0]
              }
            }
          })
        } else if (vm.source === 'student') {
          vm.schoolDataLine.chartOption.yAxis = [
            {
              type: 'value',
              splitNumber: 3,
              axisLabel: {
                fontSize: 16
              }
            }
          ]

          if (vm.degree === '1') {
            vm.schoolDataLine.dataset = resp.data.student.dataset
          } else if (vm.degree === '2') {
            vm.schoolDataLine.dataset = resp.data.student.dataset1
          } else {
            vm.schoolDataLine.dataset = resp.data.student.dataset2
          }
          vm.schoolDataLine.chartDataMaps = resp.data.student.chartDataMaps.map(item => {
            return {
              ...item,
              type: 'line',
              smooth: true,
              lineStyle: {
                type: item.dataKey === 'grade3' || item.dataKey === 'grade4' || item.dataKey === 'grade6'
                  ? 'dot'
                  : 'solid'
              }
            }
          })
        } else {
          if (vm.degree === '1') {
            vm.schoolDataLine.dataset = resp.data.teacher.dataset
          } else if (vm.degree === '2') {
            vm.schoolDataLine.dataset = resp.data.teacher.dataset1
          } else {
            vm.schoolDataLine.dataset = resp.data.teacher.dataset2
          }
          vm.schoolDataLine.chartDataMaps = resp.data.teacher.chartDataMaps.map(item => {
            return {
              ...item,
              type: item.name === '每百名学生教师数' ? 'bar' : 'line',
              yAxisIndex: item.name === '每百名学生教师数' ? 1 : 0,
              barMaxWidth: 15,
              smooth: true,
              lineStyle: {
                type: item.dataKey === 'grade3' || item.dataKey === 'grade4'
                  ? 'dot'
                  : 'solid'
              },
              itemStyle: {
                barBorderRadius: [5, 5, 0, 0]
              },
              markLine: item.name === '每百名学生教师数' ? {
                symbol: 'none',
                data: [{
                  name: '每百名学生教师数',
                  yAxis: 0.015,
                  label: {
                    show: 'true',
                    position: 'middle',
                    formatter: '最低标准55M'
                  },
                  lineStyle: {
                    normal: {
                      width: 2,
                      color: '#FF5D1D'
                    }
                  }
                }]
              } : {}
            }
          })
        }
      }).catch((err) => {
        console.log(err)
      })
    }
  }
}
</script>
